<!--
 * @Author: 汪军 624473119@qq.com
 * @Date: 2023-10-10 18:15:53
 * @LastEditors: 汪军 624473119@qq.com
 * @LastEditTime: 2023-12-12 10:24:27
 * @FilePath: \ekee-web\src\views\end\easy-link\EasyLink.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template lang="pug">
.easy-link.relative.h100
  div.container.overflow-y
    EnterpriseCenterTitle(:titleList="titleList")
    .mt4.px4
      el-form(ref="formRef", :model="form", :size="formSize", status-icon)
        el-row(:gutter="40")
          el-col(:span="6")
            el-form-item(label="变更ID", prop="id")
              el-input(v-model="form.id", placeholder="请输入", clearable)
          el-col(:span="6")
            el-form-item(label="关联订单", prop="order_no")
              el-input(v-model="form.order_no", placeholder="请输入", clearable)
          el-col(:span="6")
            el-form-item(label="变更类型", prop="change_type")
              el-select(
                v-model="form.change_type",
                placeholder="请选择",
                clearable,
                @change="subTypeChange"
              )
                el-option(
                  v-for="item in subTypeList",
                  :key="item.value",
                  :label="item.name",
                  :value="item.value"
                )
          el-col(:span="6")
            el-form-item(label="变更理由", prop="reason")
              el-input(v-model="form.reason", placeholder="请输入", clearable)
          el-col(:span="6")
            el-form-item(label="创建时间", prop="start_create_time")
              el-date-picker(
                v-model="form.start_create_time",
                type="date",
                format="YYYY-MM-DD ",
                value-format="YYYY-MM-DD ",
                placeholder="选择时间",
                @change="createChangeTime",
                :size="size"
              )
          el-col(:span="12")
          el-col(:span="6")
            .flex.justify-end
              el-button(type="primary", @click="onQueryChange") 查询
              el-button(@click="onQueryReset(formRef)") 重置
    .table.px4
      el-table(
        :data="tableData",
        :header-cell-style="tableHeaderStyle",
        :cell-style="tableCellStyle",
        empty-text="暂无数据",
        border,
        style="width: 100%"
      )
        el-table-column(prop="id", label="变更ID", width="102")
        el-table-column(prop="value", label="变更数量", width="102")
        el-table-column(prop="before", label="变更前数量", width="102")
        el-table-column(prop="after", label="变更后数量", width="102")
        el-table-column(prop="assoc_order_no", label="关联订单", width="180")
        el-table-column(prop="change_type", label="变更类型", width="100")
        el-table-column(prop="reason", label="变更理由", width="116")
        el-table-column(prop="createtime", label="创建时间", width="180")
  //- 分页
  TablePagination(
    v-if="totalList > 0",
    :totalList="totalList",
    :page="form.page",
    @handleCurrentChange="handleCurrentChange")
</template>

<script setup>
import { ref, getCurrentInstance, onMounted } from "vue";
import EnterpriseCenterTitle from "@/components/EnterpriseCenterTitle.vue";
import TablePagination from "@/components/TablePagination.vue";
import { ChainMoneyLog } from "@/api/common";
import { CompanyInfo } from "@/api/login";
const { proxy } = getCurrentInstance();
const titleList = ref([
  {
    name: "易链值",
    value: 88,
  },
]);

//数据总条数
const totalList = ref(0);


// 生命周期
onMounted(() => {
  getChainMoneyLog();
  getCompanyInfo();
});

const chain_money = ref("");
const getCompanyInfo = () => {
  CompanyInfo().then((res) => {
    if (res.code == 1) {
      // companyInfo.value = res.data;
      chain_money.value = res.data.chain_money;
      titleList.value[0].value = res.data.chain_money;
      // console.log('getCompanyInfo',res.data.chain_money);
    }
  });
};

const getChainMoneyLog = () => {
  ChainMoneyLog(form.value).then((res) => {
    if (res.code == 1) {
      
      tableData.value = res.data.data;
      totalList.value=res.data.total
      console.log('数据',totalList.value);
    }
  });
};

const handleCurrentChange = (val) => {
  form.value.page = val;
  getChainMoneyLog();
};

const formRef = ref();
const form = ref({
  id: "",
  order_no: "",
  change_type: "",
  reason: "",
  start_create_time: "",
  end_create_time: "",
  page: 1,
  page_size: 10,
});
const tableHeaderStyle = ref({
  backgroundColor: "#E5E6EB",
  color: "#000000",
  textAlign: "center",
});
const tableCellStyle = ref({
  textAlign: "center",
});
const tableData = ref([]);
const subTypeList = ref([
  { value: 1, name: "增加" },
  { value: 2, name: "减少" },
]);

//变更类型
const subTypeChange = (val) => {
  form.value.change_type = val;
  console.log("val", val);
};

// 查询
const onQueryChange = () => {
  getChainMoneyLog();
  proxy.$message.success("查询");
};
// 重置
const onQueryReset = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
  getChainMoneyLog();

};
//创建时间
const createChangeTime = (val) => {
  form.value.start_create_time = val;
  form.value.end_create_time = val;
  console.log("开始创建时间", val);
};
</script>

<style lang="stylus" scoped>
.container {
  height: calc(100vh - 204px);
}
</style>
